<template>
	<view>
		<!-- <shangpinpin></shangpinpin> -->
		<!-- 获取商品列表 -->
		<view class="liebiao">
			<view @click="tiaozhuan(item)" v-for="item in dataList" :key="item.id">
				<view class="siding">
					<view class="imgg">
						<image src='../../static/static/images/demo01/t2.jpg' mode=""></image>
					</view>
					<view class="suoyou">
						<view class="">
							<text class="xian">￥{{item.sell_price}}</text>
							<text class="yuan">￥{{item.market_price}}</text>
						</view>
						<text class="neirong">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="wenzi">
			{{aaaa}}
		</view>
	</view>
</template>

<script>
	// import shangpinpin from '../../components/shangpinpin/shangpinpin.vue'
	export default {
		data() {
			return {
				dataList: [],
				number: 1,
				aaaa: '',
			}
		},
		
		// 组件
		
		
		// 组件
		
		
		// components:{
		// 	shangpinpin
		// },
		
		
		onPullDownRefresh() {
			console.log("23")
			this.dataList = []
			uni.showToast({
				title:"加载中..."
			});
			setTimeout(()=>{
				this.getDataList()
				uni.hideLoading()
			},3000)
			uni.stopPullDownRefresh()
		},
		created() {
			this.getDataList()
		},
		methods: {
			// 跳转每一项
			tiaozhuan(item) {
				uni.navigateTo({
					url: "../tiaoshouji/tiaoshouji?id=" + item.id
				})
				console.log(item)
			},
			// 获取商品列表
			async getDataList() {
				const {
					status,
					message
				} = await uni.$Http.request(`getgoods?pageindex=+${this.number}`)
				console.log(status, message)
				this.dataList.push(...message)
			}
		},
		onPullDownRefresh() {
			this.dataList = []
			uni.showToast({
				title:"加载中..."
			});
			setTimeout(()=>{
				this.getDataList()
				uni.hideLoading()
			},1000)
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			console.log("111")
			if(this.number == 1){
				uni.showToast({
					title: "加载中",
					icon: "loading"
				}, 1000)
				setTimeout(() => {
					uni.showToast({
						title: "加载成功",
						icon: "none"
					})
				}, 1200)
				this.number = 2
				this.getDataList()
			}
			if (this.dataList.length >= 15) {
				uni.showToast({
					title: "暂无更多数据",
					icon: "none"
				})
			}
		}
	}
</script>

<style>
	.suoyou {
		width: 200rpx;
	}
	
	.liebiao {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: #EEEEEE;
		justify-content: space-around;
	}
	
	.imgg image {
		width: 100%;
		height: 400rpx;
	}
	
	.imgg {
		width: 100%;
		height: 400rpx;
	}
	
	.xian {
		color: #ff6700;
		font-size: 40rpx;
	}
	
	.yuan {
		text-decoration: line-through;
		color: #ccc;
	}
	
	.siding {
		width: 350rpx;
		height: 600rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #FEFEFE;
	}
	
	.neirong {
		font-size: 20rpx;
	}
	
	.iconfont {
		font-size: 50rpx;
		width: 57px;
		height: 57px;
		line-height: 57px;
		text-align: center;
		background-color: brown;
		border-radius: 50px;
		color: #FFFFFF;
	}
	
	.navigation {
		margin-top: 25rpx;
		display: flex;
		justify-content: space-around;
	}
	
	.tuijianshangpin {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		margin-left: -50rpx;
		font-size: 40rpx;
		color: #733A36;
		font-weight: bold;
		background-color: rgb(255, 255, 255);
	}
	
	.pin text {
		margin-left: 100rpx;
	}
	
</style>
